<template>
  <ul class="cascader-item-content">
    <li
      v-for="(item, index) in optionsItem"
      :key="index"
      :class="['cascader-item', `cascader-item-${mode}`, { [`cascader-item-${mode}-active`]: selected === item }]"
      @click="handleSelected(item)"
    >
      <a-tooltip placement="rightBottom">
        <template #title v-if="tooltip">
          <span>{{ item.label }}</span>
        </template>
        <div>
          <slot name="icon-title">
            <template v-if="selected === item">
              <svg-icon :type="item.iconHover"></svg-icon>
            </template>
            <template v-else>
              <svg-icon v-if="item.icon" :type="item.icon"></svg-icon>
            </template>
          </slot>
        </div>
      </a-tooltip>
      <a-tooltip placement="rightBottom">
        <template #title v-if="tooltip">
          <span>{{ item.label }}</span>
        </template>
        <span class="cascader-item-name" v-if="showTitle">{{ item.label }}</span>
      </a-tooltip>
    </li>
  </ul>
</template>

<script>
import { Tooltip } from 'ant-design-vue';
export default {
  name: 'CascaderItem',
  components: {
    [Tooltip.name]: Tooltip
  },
  props: {
    optionsItem: {
      type: Array,
      default: () => []
    },
    selected: {
      type: Object,
      default: () => ({})
    },
    mode: {
      type: String,
      default: 'horizontal'
    },
    indexLevel: {
      type: Number,
      default: 1
    },
    tooltip: {
      type: Boolean,
      default: false
    },
    showTitle: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {

    }
  },
  methods: {
    handleSelected (e) {
      this.$emit('handleSelected', e, this.indexLevel)
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/vars.less";
.cascader-item-content {
  margin-top: 1px;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  .cascader-item {
    width: 100%;
    cursor: pointer;
  }
  .cascader-item-horizontal {
    display: flex;
    align-items: center;
    height: 48px;
    // &:hover {
    //   background: lighten(@dark-color, 17.2% - lightness(@dark-color));
    // }
    i {
      margin: 0 10px 0 15px;
      &.anticon {
        pointer-events: none;
      }
    }
  }
  .cascader-item-vertical {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 11px 6px;
    width: calc(100% - 12px);
    height: 80px;
    i {
      pointer-events: none;
    }
  }
  .cascader-item-vertical-active {
    color: lighten(@dark-color, 99.9% - lightness(@dark-color));
    background-color: lighten(@dark-color, 17.1% - lightness(@dark-color));
  }
  .cascader-item-horizontal-active {
    color: lighten(@dark-color, 99.9% - lightness(@dark-color));
    background-color: lighten(@dark-color, 10.2% - lightness(@dark-color));
  }
}
</style>